<template>
	<div id="func">
		<div class="rightbar">
			<div class="template fl" :class="{'active':rightTabIndex == 0}"><a @click="changeTab(0)">模板</a></div>
			<div class="shape fl" :class="{'active':rightTabIndex == 4}"><a @click="changeTab(4)">素材</a></div>
			<div class="text fl" :class="{'active':rightTabIndex == 1}"><a @click="changeTab(1)">文字</a></div>
			<div class="background fl" :class="{'active':rightTabIndex == 3}"><a @click="changeTab(3)">背景</a></div>
			<div class="picture fl" :class="{'active':rightTabIndex == 2}"><a @click="changeTab(2)">图片</a></div>
			<!-- <div class="music fl" :class="{'active':rightTabIndex == 5}"><a @click="changeTab(5)">音乐</a></div>
			<div class="form fl" :class="{'active':rightTabIndex == 6}"><a @click="changeTab(6)">表单</a></div>
			<div class="interaction fl pr" :class="{'active':rightTabIndex == 7}"><a @click="changeTab(7)">互动</a><i></i></div>
			<div class="newlogo fl" :class="{'active':rightTabIndex == 8}"><a @click="changeTab(8)" >LOGO</a></div> -->
		</div>
	</div>

</template>

<script type="text/javascript">
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'func',
  computed: {
		...mapGetters([
			"rightTabIndex",
		])
	},
  methods: {
    changeTab(tab){
      var params = {};
      params.index = tab;
      params.isChangePic=false;
      this.$store.dispatch('changeRightTab',params)

    }
  }
}
</script>

<style type="text/css">
.rightbar{position: fixed;top: 54px;left: 0;bottom:0;width: 65px; background: #eee;z-index:100;}
.rightbar a{width: 65px;line-height: 20px;padding-top: 40px;padding-bottom: 6px; font-size: 14px;color: #72777d;text-align: center;border-radius:0 4px 4px 0;}
.rightbar i{display: block;position: absolute;width: 8px;height: 8px;background: #f00;border-radius: 50%;top: 8px;right: 5px;}
.rightbar .template a{background: url(../assets/images/ricon1.png) no-repeat center 15px;}
.rightbar .template.active a{background: url(../assets/images/ricon1_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .text a{background: url(../assets/images/ricon2.png) no-repeat center 15px;}
.rightbar .text.active a{background: url(../assets/images/ricon2_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .picture a{background: url(../assets/images/ricon3.png) no-repeat center 15px;}
.rightbar .picture.active a{background: url(../assets/images/ricon3_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .background a{background: url(../assets/images/ricon4.png) no-repeat center 15px;}
.rightbar .background.active a{background: url(../assets/images/ricon4_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .shape a{background: url(../assets/images/ricon5.png) no-repeat center 15px;}
.rightbar .shape.active a{background: url(../assets/images/ricon5_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .music a{background: url(../assets/images/ricon6.png) no-repeat center 15px;}
.rightbar .music.active a{background: url(../assets/images/ricon6_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .form a{background: url(../assets/images/ricon7.png) no-repeat center 15px;}
.rightbar .form.active a{background: url(../assets/images/ricon7_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .interaction a{background: url(../assets/images/ricon8.png) no-repeat center 15px;}
.rightbar .interaction.active a{background: url(../assets/images/ricon8_a.png) no-repeat center 15px #2ad8bd;color: #fff;}
.rightbar .newlogo a{width: 38px; padding:0;margin: 20px 10px;border: 1px solid #b2b9c2;border-radius: 3px;font-size: 12px; }
.rightbar .newlogo.active a{border: 1px solid #1abd9b;border-radius: 3px;font-size: 12px;color: #1abd9b; }
</style>
